<template>
    <div class="map">
        <div id="map_container"></div>
        <div v-if="showOperate" class="search">
            <el-input input-style="width: 70%;margin-right: 10px;" v-model="searchName" :placeholder="content" />
            <el-button type="primary" @click="search">查询</el-button> 
            <div v-if="isShow" class="mapList">
                <span @click="isShow=false" style="cursor: pointer;font-size: 21px;float: right;">×</span>
                <ul>
                    <li v-for="(item,index) in AddrList" :key="index" @click="sumbit(item)">{{ item.title }}</li>
                </ul>
            </div>
        </div>   
    </div>
</template>
<script>
import { defineComponent } from '@vue/composition-api'
import { BMPGL  } from '../../../../util/map'
import { getCurrentInstance} from 'vue'
import { useRouter } from 'vue-router'
import { useStore } from 'vuex' 
export default defineComponent({
    setup() {
        // 路由
        const route = useRouter();
        // vuex的数据对象
        const store = useStore();
        const { proxy } = getCurrentInstance();
        return{
            proxy,
            route,
            store
        } 
    },
    data(){
        return{
            map:null,
            flagPoint:false,
            corrd:[],
            local:null,
            searchName:'',
            AddrList:[],
            isShow:false,
            content:'请输入地址'
        }
    },
    props:{
        Area:{
            type:String,
            default:''
        },
        coordinate:{
            type:Array,
            default:[]
        },
        flag:{
            type:String,
            default:''
        },
        showOperate:{
            type:Boolean,
            default:true
        }
    },
    watch: {
        Area:{
            handler(newValue) {
                this.searchName = '';
                this.isShow = false;
            },
            deep: true
        },
        coordinate:{
            handler(newValue) {
                this.dealCorrdinate(newValue)
            },
            deep: true
        },
        flag:{
            handler(n){
                this.searchName = '';
                this.AddrList = []
                this.isShow = false;
                if(n=='base'){
                    this.content = "请输入救助站名称";
                }else if(n=='pet'){
                    this.content = "请输入宠物名称";
                }else{
                    this.content = "请输入地址";
                }
            },
            deep: true
        },
        showOperate:{
            handler(n){
                // eslint-disable-next-line vue/no-mutating-props
                this.showOperate = n;
            },
            deep: true
        }
    },
    async created () {
        await this.LoadData()
        if(this.flagPoint){
            this.dealCorrdinate(this.corrd)
        }
    },
    methods: {
         LoadData(){
            let self = this;
            return new Promise((resolve,reject)=>{
                BMPGL(self.MapAk).then(res=>{
                    self.map = new BMapGL.Map("map_container");
                    var options = {
                        // 设置检索方法
                        onSearchComplete: function(results){
                            self.searchMap(results);
                        }
                    }
                    self.local = new BMapGL.LocalSearch(self.map, options);
                    // 创建点坐标 axios => res 获取的初始化定位坐标
                    let point = new BMapGL.Point(115.15460974532323, 36.291288029877514)
                    // 初始化地图，设置中心点坐标和地图级别
                    self.map.centerAndZoom(point, 15)
                    //开启鼠标滚轮缩放
                    self.map.enableScrollWheelZoom(true)
                    self.map.setHeading(64.5)
                    resolve();
                })
            })
         },
        // 对发来的坐标进行处理
        async dealCorrdinate(res){
            let self = this;
            if(self.map==null){
                self.flagPoint = true;
                self.corrd = res;
                return;
            }
            if(res.length==0) return;
            self.map.clearOverlays();
            let c = JSON.parse(res[0].lal);
            self.map.centerAndZoom(new BMapGL.Point(c[0], c[1]), 15)
            res.forEach(e => {
                self.addMake(e)
            });
        },
        addMake(e){
            let self = this;
            let c = JSON.parse(e.lal);
            // eslint-disable-next-line no-undef
            var point = new BMapGL.Point(c[0], c[1]);
                // eslint-disable-next-line no-undef
            var marker = new BMapGL.Marker(point);
            self.map.addOverlay(marker);
                // var div = document.createElement('div');
                // div.className = "mark";
                // let name;
                // if(self.flag=='base'){
                //     name = e.name;
                //     div.innerHTML = `<div><p>负责人：${e.supers}</p><span>当前宠物数量：${e.nowCount}</span><p>地址：${e.area}</p></div>`;
                // }else if(self.flag =='pet'){
                //     name = e.uname;
                //     div.innerHTML = `<div style="font-size:13px;"><p>领养人：<img style='width:40px;height:40px;border-radius:50%;' src=${e.uicon} /></p>
                //         <p>宠物<img style='width:40px;height:40px;border-radius:50%;' src=${e.pimage} /></p><p>宠物名称：${e.pname}}</p>
                //         <p>地址：${e.addr}</p></div>`
                // }
                // // 创建信息窗口
                // var opts = {
                //     width: 230,
                //     height: 90,
                //     title: name
                // };
                // var infoWindow = new BMapGL.InfoWindow(div, opts);
                // // 点标记添加点击事件
                // marker.addEventListener('click', function () {
                //     self.map.openInfoWindow(infoWindow, point); // 开启信息窗口
                // });
        },
        search(){
            if(this.searchName=="") return;
            if(this.flag=="base"){
                this.searchBase();
            }else if(this.flag == "pet"){
                this.searchPet()
            }else{
                this.local.search(this.searchName);
                this.isShow = true;
            }
        },
        searchPet(){
            let self = this;
            let row = {};
            row.name = self.searchName;
            row.current = 1;
            row.end = 20;
            self.$http.post(`${self.baseUrl}/pet/UserByPet`,row).then(res=>{
                self.dealCorrdinate(res.data);
            })
        },
        searchBase(){
            let self = this;
            let row = {};
            row.name = self.searchName;
            row.current = 1;
            row.end = 20;
            self.$http.post(`${self.baseUrl}/base/selectName`,row).then(res=>{
                let {document} = res.data;
                self.dealCorrdinate(document);
            })
        },
        searchMap(msg){
            this.AddrList = msg._pois;
        },
        sumbit(msg){
            let {lat,lng} = msg.point;
            this.map.centerAndZoom(new BMapGL.Point(lng,lat),15)
            this.$emit('addr', msg);
        }
    }
})
</script>
<style scoped>
    .map{
        position: relative;
        width: 100%;
        height: 100%;
    }
    #map_container{
        width: 100%;
        height: 100%;
        position:absolute;
        z-index: 1;
    }
    .search{
        float: right;
        position: absolute;
        right: 20px;
        top: 20px;
        z-index: 10;
    }
    .mark{
        height: 100px;
        background-color: #fff;
        color: #333;
        padding: 2px;
        width: 230px;
        font-size: 12px;
        border-radius: 10px;
        box-shadow: 3px 1px 12px 4px #ccc;
    }
    .mapList{
        position: relative;
        width: calc(100% - 34px);
        height: 250px;
        background-color: #fff;
        padding: 10px;
        overflow: auto;
        margin-top: 5px;
        border-radius: 3px;
        box-shadow: 1px 0px 7px 5px #d4cece;
    }
    .mapList ul{
        width: 100%;
        height: 100%;
    }
    .mapList ul li{
        width: 100%;
        height: 32px;
        border-bottom: 1px solid #5e5757;
        color: #666;
        list-style-type: none;
        cursor: pointer;
        line-height: 32px;
    }
</style>